<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="../util/jquery.js"></script>
    <script src="../util/common.js"></script>
    <link rel="stylesheet" type="text/css" href="../util/index.css" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <title>my Strategy</title>
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="card-title">
          <span class="title">我的理财顾问</span>
        </div>
        <div class="card-row2">
          <div style="display: flex;flex-direction: row;">
            <div class="card-avatar">
              <img alt="avatar" src="../assets/imgs/avatar1.jpeg" />
            </div>
            <div class="card-name">
              <div style="font-size: 2rem; margin-bottom: 0.8rem">路延平</div>
              <div>金牌理财师</div>
              <div>华夏银行</div>
            </div>
          </div>
          <div class="card-name" style="justify-content: end;">
            <div class="card-know" >了解理财师</div>
          </div>
        </div>
        <div class="card-row3">
          <div class="connect-type">
            <img src="../assets/home/wechat.png"/>
            <div>微信</div>
          </div>
          <div class="connect-type">
            <img src="../assets/home/phone.png"/>
            <div>电话</div>
          </div>
        </div>
      
      
      </div>
      <nav>
        <ul>
          <li class="tab">
            推荐策略
          </li>
          <li >公开策略</li>
        </ul>
      </nav>
      <div class="content">
        <div class="col div_show">
          <div class="strategy_item">
            <div class="row j_sb mt_2">
              <div class="product_title">
                <div>全球配置 Ⅱ</div>
                <div style="margin-left: 1rem;">GH3R40</div>
              </div>
              <div id="like_icon" class="like_icon"><img src="../assets/home/unlike.png"/></div>
            </div>
            <!-- 第二行收益 -->
            <div class="row mt_1 j_sb">
              <div class="col">
                <div class="row mt_1">
                  <div class="col">
                    <div class="row">
                      <div class="profit_title">12.89</div>
                      <div class="col ml_1 j_end ">
                        <div class="profit_persent">%</div>
                      </div>
                    </div>
                    <div class="profit_sub_title">模拟历史年化收益率</div>
                  </div>
                  <div class="col j_end ml_3">
                    <div class="fs_normal">1年～3年</div>
                    <div class="fs_normal secondary">建议持有</div>
                  </div>
                  
                </div>
                <div class="mt_1 orange row mb_1 fs_normal">全球资产配置 自动再平衡</div>
              </div>
              <div class="col" style="justify-content: flex-end;">
                <div class="profit_circle col orange mb_1">
                  <div>25天后</div>
                  <div>关停</div>
                </div>
              </div>
            </div>
            
           
            <div class="secondary2 fs_small2">您的理财师路延平与2020-05-02 13:23:23为您专属定制</div>
            <div class="row mt_normal mb_1">
              <div class="active_btn ">分享</div>
              <div class="secondary_btn">调仓提醒</div>
            </div>
          </div>
          <div class="strategy_item_divider"></div>

          <!-- 第二个理财产品 item -->
          <div class="strategy_item">
            <div class="row j_sb mt_2">
              <div class="product_title">
                <div>全球配置 Ⅱ</div>
                <div style="margin-left: 1rem;">GH3R40</div>
              </div>
              <div id="like_icon" class="like_icon" ><img src="../assets/home/like.png"/></div>
            </div>
            <!-- 第二行收益 -->
            <div class="row mt_1 j_sb">
              <div class="col">
                <div class="row mt_1">
                  <div class="col">
                    <div class="row">
                      <div class="profit_title">12.89</div>
                      <div class="col ml_1 j_end ">
                        <div class="profit_persent">%</div>
                      </div>
                    </div>
                    <div class="profit_sub_title">模拟历史年化收益率</div>
                  </div>
                  <div class="col j_end ml_3">
                    <div class="fs_normal">1年～3年</div>
                    <div class="fs_normal secondary">建议持有</div>
                  </div>
                  
                </div>
                <div class="mt_1 orange row mb_1 fs_normal">全球资产配置 自动再平衡</div>
              </div>
              <div class="col" style="justify-content: flex-end;">
                <div class="profit_circle col orange mb_1">
                  <div>25天后</div>
                  <div>关停</div>
                </div>
              </div>
            </div>
            
           
            <div class="secondary2 fs_small2">您的理财师路延平与2020-05-02 13:23:23为您专属定制</div>
            <div class="row mt_normal mb_1">
              <div class="active_btn ">分享</div>
              <div class="secondary_btn">调仓提醒</div>
            </div>
          </div>

        </div>
        <div>456</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $(document).ready(function() {

    })
    $('ul li').click(function(event) {
      $(this).addClass('tab');
      $(this).siblings().removeClass('tab');
      $('.content>div').eq($(this).index()).addClass('div_show');
      $('.content>div').eq($(this).index()).siblings().removeClass('div_show');
    })

    //点击喜欢按钮
    $('.like_icon').click(function(event) {
      if ($(this).children().first().attr('src').indexOf('unlike') !== -1) {
        $(this).children().first().attr('src', '../assets/home/like.png');
      } else {
        $(this).children().first().attr('src', '../assets/home/unlike.png');
      }
      
    })
  </script>
</html>
